<template>
    <div>
        <h1 class="title">THANKS FOR WATCHING</h1>
        <p class="sub-title" style="margin-bottom: 20px;">期待与您的面谈</p>
        <div class="content-box">
            <img style="width:4rem" :src="userImg" alt="">
            <footer>
                <div v-for="(item,index) in footer" :key="index">
                    <img :src="item.icon" alt="">
                    <a v-if="item.type === 1" target="_black" :href="item.link" style="font-size:0.2rem">{{item.link}}</a>
                    <p v-else style="font-size:0.2rem">{{item.link}}</p>
                </div>
            </footer>
        </div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            userImg:require('@/assets/end/we-chat.jpg'),
            footer:[
                {icon:require("@/assets/end/gitee.svg"),link:"https://gitee.com/zhao-benshan",type:1},
                {icon:require("@/assets/end/csdn.svg"),link:"https://blog.csdn.net/m0_45329584",type:1},
                {icon:require("@/assets/end/iphone.svg"),link:"18716385024",type:2},
                {icon:require("@/assets/end/mail.svg"),link:"2121333099@qq.com",type:2}
            ]
        }
    }
}
</script>
<style scoped>
@media screen and (min-width:980px ) {
    .content-box{
        margin-top: 1.5rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}
footer{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
footer>div{
    display: flex;
    align-items: center;
    margin-bottom: 0.2rem;
}
footer>div>img{
    width: 0.35rem;
    margin-right: 0.1rem;
}
.title{
    font-size: 0.3rem;
    line-height: 0.8rem;
}
.sub-title{
    margin-bottom: 0.2rem;
    font-size: 0.24rem;
}
</style>